<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情页</title>
    <link rel="stylesheet" href="common.css" />
    <link rel="stylesheet" href="details.css" />
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <img src="病人.png" alt="病人" />
      <div class="title">我的博客系统</div>

      <div class="space"></div>

      <a href="博客列表页.html">主页</a>
      <a href="博客编辑页.html">写博客</a>
      <a href="博客登录页.html">退出登录状态</a>
    </div>
    <!-- 主题部分 -->
    <div class="container">
      <div class="container-left">
        <div class="card">
          <img src="病人.png" alt="病人" />
          <h3>s:103</h3>
          <a target="_blank" href="https://gitee.com/carefree-state"
            >我的码云链接</a
          >
          <div class="counter">
            <span class="h">文章</span>
            <span class="h">分类</span>
          </div>

          <div class="counter">
            <span>3</span>
            <span>1</span>
          </div>
        </div>
      </div>
      <div class="container-right">
        <div class="article">
          <h3>我的第一篇博客</h3>
          <div class="date">2023-05-17 23:00:00</div>
          <div class="content">
            <p>
              从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Repellendus perferendis ea
              voluptatem quae architecto. Nam aut animi, est ut, tempore
              doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Repellendus perferendis ea voluptatem quae
              architecto. Nam aut animi, est ut, tempore doloremque in ipsam
              numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
              ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
              perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
              tempore doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid!
            </p>
            <p>
              从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Repellendus perferendis ea
              voluptatem quae architecto. Nam aut animi, est ut, tempore
              doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Repellendus perferendis ea voluptatem quae
              architecto. Nam aut animi, est ut, tempore doloremque in ipsam
              numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
              ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
              perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
              tempore doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid!
            </p>
            <p>
              从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Repellendus perferendis ea
              voluptatem quae architecto. Nam aut animi, est ut, tempore
              doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Repellendus perferendis ea voluptatem quae
              architecto. Nam aut animi, est ut, tempore doloremque in ipsam
              numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
              ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
              perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
              tempore doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid!
            </p>
            <p>
              从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Repellendus perferendis ea
              voluptatem quae architecto. Nam aut animi, est ut, tempore
              doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Repellendus perferendis ea voluptatem quae
              architecto. Nam aut animi, est ut, tempore doloremque in ipsam
              numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
              ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
              perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
              tempore doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid!
            </p>
            <p>
              从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Repellendus perferendis ea
              voluptatem quae architecto. Nam aut animi, est ut, tempore
              doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Repellendus perferendis ea voluptatem quae
              architecto. Nam aut animi, est ut, tempore doloremque in ipsam
              numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
              ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
              perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
              tempore doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid!
            </p>
            <p>
              从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Repellendus perferendis ea
              voluptatem quae architecto. Nam aut animi, est ut, tempore
              doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Repellendus perferendis ea voluptatem quae
              architecto. Nam aut animi, est ut, tempore doloremque in ipsam
              numquam voluptate placeat non eveniet distinctio. Aliquid!
            </p>
            <p>
              从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Repellendus perferendis ea
              voluptatem quae architecto. Nam aut animi, est ut, tempore
              doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Repellendus perferendis ea voluptatem quae
              architecto. Nam aut animi, est ut, tempore doloremque in ipsam
              numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
              ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
              perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
              tempore doloremque in ipsam numquam voluptate placeat non eveniet
              distinctio. Aliquid!
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
